@import "~style/index.scss";

.uca {
  &_FileBatch {
    min-height: 104px;

    .op-bar {
      width: 100%;
      line-height: 36px;

      .action {
        margin-right: 12px;

        button {
          width: 35px;
        }

        button[disabled] {
          // top: 1px; // 修正视觉问题
        }
      }
    }

    .operation {
      height: 100px;
      width: 100px;

      margin-right: 4px;

      .op {
        &-icon {
          font-size: 48px;
          margin-bottom: 6px;
          color: $uni_color;
        }

        &-label {
          width: 100%;
          display: block;
          text-align: center;
        }
      }

      &_disabled {
        height: 100px;
        width: 100px;

        margin-right: 4px;

        .op {
          &-icon {
            font-size: 48px;
            margin-bottom: 6px;
            color: $color_disable_text;
          }

          &-label {
            width: 100%;
            display: block;
            text-align: center;
          }
        }
      }
    }

    .ant-upload-wrapper {
      .ant-upload-drag {
        display: inline-block;
        float: left;
        width: 102px;
        height: 102px;

        .ant-upload {
          padding: 12px 0;
        }
      }

      .ant-upload-list {
        display: inline-block;
        overflow: hidden;
        margin-left: $uni_font * 0.5;

        // 列表模式
        &-text {
          line-height: $uni_font * 2;
          min-height: $uni_font * 2;
          min-width: $uni_font * 36;
          width: 80%;

          .ant-upload-list-item {
            margin-top: $uni_font * 0.3;

            &:hover {
              cursor: pointer;
            }
          }
        }

        // 卡片模式
        &-picture-card {
          width: 80%;
          min-height: 102px;
          display: inline-block;
          float: left;

          .ant-upload-list-item {
            float: left;
            width: 102px;
            height: 102px;
            margin-right: $uni_font * 0.4;
            margin-bottom: $uni_font * 0.4;
            padding: 0;
            margin-top: 0;
            flex-direction: column;

            &:hover {
              cursor: pointer;
            }

            &-name {
              max-width: 90px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}